<template>
	<view>
		<uni-popup ref="popup" :class="{popVerticalLayout: vertical}" :type="type" background-color="#f1f1f1"
			border-radius="10px 10px 10px 10px">
			<view v-if="title" style="padding: 10px;display: flex;justify-content: center;">
				<text style="color: #dd524d;font-size: large;font-weight: bold;">{{title}}</text>
			</view>
			<view class="pop-body" style="padding: 10px;display: flex;gap: 10px;">
				<button v-for="(item,index) in action" :key="index" class="pop-button-action"
					:style="{color:item.txtColor, backgroundColor:item.bgColor}" @click="eventAction(item.value)">
					<view class="" style="display: flex;gap: 10px;align-items: center;">
						<uni-icons :type="item.icon" :color="item.txtColor" size="20"></uni-icons>
						<text>{{item.text}}</text>
					</view>
				</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "pop-dialog-multiple",
		data() {
			return {
				name: '自定义多态对话框'
			};
		},
		props: {
			type: {
				type: String,
				default: 'center'
			},
			title: {
				type: String,
				default: null
			},
			vertical: {
				type: Boolean,
				default: false
			},
			action: {
				type: Array,
				default: [{
					text: '取消',
					value: 'close',
					icon: 'redo',
					bgColor: '#f1f1f1',
					txtColor: "#dd524d"
				}]
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			eventAction(e) {
				this.$emit(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popVerticalLayout {
		.pop-body {
			flex-direction: column;
		}
	}

	.pop-button-action {
		min-width: 120px;
	}
</style>